<template>
  <div class="dashboard-container">
    <div>订单基本信息</div>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :span="8">订单编号：2020-3-20</el-col>
      <el-col :span="8">订单状态：已审批</el-col>
      <el-col :span="8">下单时间：230</el-col>
      <el-col :span="8">下单客户：234</el-col>
      <el-col :span="8">客户账户：5</el-col>
      <el-col :span="8">下单数量：2</el-col>
    </el-row>
    <div>订单支付信息</div>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :span="8">订单总金额：2020-3-20</el-col>
      <el-col :span="8">实付金额：已审批</el-col>
      <el-col :span="8">支付渠道：230</el-col>
      <el-col :span="8">是否使用了优惠卷：234</el-col>
      <el-col :span="8">优惠卷编号：5</el-col>
      <el-col :span="8">优惠卷面值：2</el-col>
      <el-col :span="8">支付方式：支付宝</el-col>
      <el-col :span="8">支付账号：56+5+65+552</el-col>
      <el-col :span="8">支付事件：56+5+65+552</el-col>
    </el-row>
    <div>预约体检信息</div>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :span="8">预约吗：2020-3-20</el-col>
      <el-col :span="8">预约门店：已审批</el-col>
      <el-col :span="8">预约体检事件：230</el-col>
      <el-col :span="8">预约体检人数：2</el-col>
      <el-col :span="24">
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
          <el-table-column prop="name" label="受检者"></el-table-column>
          <el-table-column prop="name" label="受检者联系方式"></el-table-column>
          <el-table-column prop="name" label="受检者证件类型"></el-table-column>
          <el-table-column prop="name" label="受检者证件号码"></el-table-column>
          <el-table-column prop="name" label="检查类型"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div>其他信息</div>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :span="8">发票类型：2020-3-20</el-col>
      <el-col :span="8">发票抬头：已审批</el-col>
      <el-col :span="8">备注：2</el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      input: '',
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ]
    }
  },
  methods: {
    onSubmit() {
      this.$notify({
        title: '成功',
        message: '这是一条成功的提示消息',
        type: 'success'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-col {
  margin-bottom: 20px;
}
.searchBox {
  display: flex;
  .inputSearch {
    margin-left: 20px;
    width: 300px;
  }
}
.dashboard {
  &-container {
    margin: 30px;
    .detailHearder {
      display: flex;
      align-items: center;
    }
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
